<template>
    <div class="contentar reportMain">
        <div class="whiteBg choiceSty">
            <div class="flex mb20">
                <div class="w50 navBtm center borderBlue colorBlue" @click="goCheckNav(1)" :class="{'blueBg colorfff':activeNav==1}">按天</div>
                <div class="w50 navBtm center borderBlue colorBlue"  style="margin:0 -1px" @click="goCheckNav(2)" :class="{'blueBg colorfff':activeNav==2}">按月</div>
                <div class="w50 navBtm center borderBlue colorBlue" @click="goCheckNav(3)" :class="{'blueBg colorfff':activeNav==3}">按年</div>
            </div>
            <div class="flex flexCenter alignCenter ">
                <img src="../../assets/image/sub.png" style="width:0.4rem"  @click="goSub" />
                <div style="margin:0 0.3rem" class="fontbold fontSize16 flex alignCenter" @click="goCheckTime">{{activeAllDate}}</div>
                <img src="../../assets/image/add.png" style="width:0.4rem" @click="goAdd" >
            </div>
        </div>
        <div class="reportTotalSty">
            <div class="flex flexAround samePeriodNav"  v-if="activeNav>1">
                <div class="" :class="{'blueBorder colorBlue':contemporeType==1,'grayBorder':contemporeType==2}" @click="goContempore(1)">同期</div>
                <div :class="{'blueBorder colorBlue':contemporeType==2,'grayBorder':contemporeType==1}" @click="goContempore(2)">同店同期</div>
            </div>
            <div class="contentLayout whiteBg">
                <div class="subTitle mt4 flex alignCenter">
                    <div class="h4 fontSize16 fontbold">总销售额(万)</div>
                    <div class="fontSize16 colorBlue fontbold mr10 ml10">{{contemporeType==1?allData.num:allData.shopNum}}</div>
                    <div class="flex alignCenter" v-show="contemporeType==1">
                        <div class="fontSize12" :class="{'colorGreen':allData.ratio<0,'colorRed':allData.ratio>0}">{{allData.ratio}}<span v-if="allData.ratio!==''">%</span></div>
                        <van-icon name="down" v-if="allData.ratio!=0" :class="{'colorGreen':allData.ratio<0,'colorRed rotate180':allData.ratio>0}"/>
                    </div>
                    <div class="flex alignCenter" v-show="contemporeType==2">
                        <div class="fontSize12" :class="{'colorGreen':allData.shopRatio<0,'colorRed':allData.shopRatio>0}">{{allData.shopRatio}}<span v-if="allData.shopRatio!==''">%</span></div>
                        <van-icon name="down" v-if="allData.shopRatio!=0" :class="{'colorGreen':allData.shopRatio<0,'colorRed rotate180':allData.shopRatio>0}"/>
                    </div>
                </div>
                <div class="listContent">
                    <div class="w33 disInline center" v-for='(item,index) in reportInfo.total' :key="index" @click='getChannel(item)'>
                        <div class="fontbold fontSize12">{{item.tit}}</div>
                        <div class="colorBlue mt5 fontSize16">{{contemporeType==1?item.num:item.shopNum}}</div>
                        <div class="flex flexCenter alignCenter" v-show="contemporeType==1">
                            <div class="fontSize13" :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">{{item.ratio===''?'-':item.ratio+'%'}}</div>
                            <van-icon name="down" v-if="item.ratio!=0" :class="{'colorGreen':item.ratio<0,'colorRed rotate180':item.ratio>0}"/>
                        </div>
                        <div class="flex flexCenter alignCenter" v-show="contemporeType==2">
                            <div class="fontSize13" :class="{'colorGreen':item.shopRatio<0,'colorRed':item.shopRatio>0}">{{item.shopRatio===''?'-':item.shopRatio+'%'}}</div>
                            <van-icon name="down" v-if="item.shopRatio!=0" :class="{'colorGreen':item.shopRatio<0,'colorRed rotate180':item.shopRatio>0}"/>
                        </div>
                    </div>
                </div>            
            </div>
            <div class="contentLayout whiteBg">
                <div class="subTitle">
                    <span class="fontSize16 fontbold">渠道销售额(万)</span>
                    <!-- <span class="fontSize13"> 同期提升比</span> -->
                </div>
                <div class="flex center" v-show="channelTitle.length>0">
                    <div class="w22">
                        <div class="brandName fontSize13">渠道/品牌</div>
                        <div class="flex alignCenter flexCenter fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in channelTitle" :key="index">{{item.name}}</div>
                    </div>
                    <div v-for="(item,index) in reportInfo.channel" :key="index" class="flex1">
                        <div class="brandName fontSize14 fontbold">{{item.tit}}</div>
                        <div v-for="(el,elindex) in item.sub" :key="elindex" class="H50 flex flexColumn flexCenter" @click="goSubLink(el)">
                            <div class="colorBlue fontbold fontSize13">{{el.num}}</div>
                            <div v-show="contemporeType==1">
                                <span class="fontSize11" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">{{el.ratio?`${el.ratio}%`:''}}</span>
                                <van-icon name="down" v-if="el.ratio!=0" :class="{'colorGreen':el.ratio<0,'colorRed rotate180':el.ratio>0}"/>
                            </div>
                            <div v-show="contemporeType==2">
                                <span class="fontSize12" :class="{'colorGreen':el.shopRatio<0,'colorRed':el.shopRatio>0}">{{el.shopRatio?`${el.shopRatio}%`:''}}</span>
                                <van-icon name="down" v-if="el.shopRatio!=0" :class="{'colorGreen':el.shopRatio<0,'colorRed rotate180':el.shopRatio>0}"/>
                            </div>
                            <!-- <div class="flex flexCenter alignCenter fontSize12" v-if="el.ratio!=''" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
                                <span>{{el.ratio}}<span v-if="el.ratio">%</span></span>
                                <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="contentLayout whiteBg">
            <div class="fontSize18 subTitle fontbold">会员相关指标</div>
            <div class="flex center">
                <div class="w22">
                    <div class="brandName fontSize14">指标/品牌</div>
                    <div class="flex alignCenter flexCenter fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in userTitle" :key="index">{{item.name}}</div>
                </div>
                <div v-for="(item,index) in reportInfo.user" :key="index" class="flex1">
                    <div class="brandName fontSize14 fontbold">{{item.name}}</div>
                    <div v-for="(el,elindex) in item.user" :key="elindex" class="H50 flex flexColumn flexCenter">
                        <div class="colorBlue fontbold fontSize14">{{el.num}}</div>
                    </div>
                </div>
            </div>
        </div>
        <van-calendar class="" v-model="isShowDate" :min-date="minDate" :max-date="maxDate" color="#4873c1" @confirm="onConfirmDate" />
        <van-popup v-model="isShowMonth" round position="bottom">
            <van-datetime-picker
                v-model="monthSty"
                type="year-month"
                title="选择年月"
                :min-date="minMonth"
                :max-date="maxMonth"
                :formatter="formatter"
                @confirm="onConfirmMonth"
                @cancel="onCancelDate"
            />
        </van-popup>
    </div>
</template>
<script>
import {GetQueryStr,getDate} from '@/common/common.js'
// import {getDate} from '@/common/common.js'

import { Toast,DatetimePicker} from 'vant'
// Vue.use(DatetimePicker);
// import VConsole from 'vconsole'
// var vConsole = new VConsole();  getChannelReport
export default {
    name:'testreportData',
    data(){
        return{
            activeNav:1,
            activeAllDate:'',
            allData:{},
            reportInfo:{},
            // userTitle:{},
            contemporeType:1,
            userTitle:[],
            channelTitle:[],
            year:0,
            month:0,
            day:0,
            preDate:'',
            nowMonthSty:'',//现在几月
            isShowDate:false,
            isShowMonth:false,
            minDate:'',
            maxDate:'',
            monthSty:'',
            nowYearSty:"",
            nowdate:''
        }
    },
    created(){
         let requestId=GetQueryStr('requestId')
        let loid=localStorage.getItem('requestId')
        if(loid===null){//第一次进
            console.log('loid=====为Null')
            localStorage.removeItem('activeDate')
            localStorage.setItem('requestId',requestId)
            // localStorage.removeItem('activeMonth')
            localStorage.removeItem('activeNav')
            localStorage.removeItem('activeAllDate')
            this.activeNav=1
        }else{
            if(loid != requestId){
                console.log('清掉')
                localStorage.removeItem('activeDate')
                localStorage.setItem('requestId',requestId)
                // localStorage.removeItem('activeMonth')
                localStorage.removeItem('activeNav')
                localStorage.removeItem('activeAllDate')
                this.activeNav=1
            }
        }

        var date=new Date()
        //前一天
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        console.log('preDate-----',preDate)
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()
        month<10?month='0'+month: ''
        day<10?day='0'+day: ''

        this.monthSty=preDate
        this.nowMonthSty=`${year}-${month}`
        this.nowYearSty=`${year}`
        // console.log('nowMonthSty',this.nowMonthSty)
        

        //当天
        let nowMonth=date.getMonth() + 1
        let nowDay=date.getDate()
        nowMonth<10?nowMonth='0'+nowMonth: ''
        nowDay<10?nowDay='0'+nowDay: ''
        let nowdate=`${date.getFullYear()}-${nowMonth}-${nowDay}`
        console.log('现在的时间',nowdate)
        this.nowdate=nowdate
        // this.getDate(year,month,day)


        // let activeDate=localStorage.getItem('activeDate')
        // console.log('缓存时间activeDate',activeDate)
         
        let activeNav= localStorage.getItem('activeNav')
        if(activeNav){
            console.log('有缓存',activeAllDate)
            // localStorage.setItem('activeNav',activeNav)
            let activeAllDate= localStorage.getItem('activeAllDate')
            this.activeAllDate=activeAllDate
            this.activeNav=activeNav
            if(activeNav==1){//按天
                let currentDate=localStorage.getItem('currentDate')
                if(currentDate){//如果缓存了当天时间
                    // console.log('缓存了当天')
                    if(currentDate==nowdate){//同一天
                        console.log('同一天',currentDate)
                        // let dateList=this.activeAllDate.split('-')
                        // console.log('dateList',dateList)
                        // this.day=dateList[2]
                        // this.month=dateList[1]

                    }else{//已经过了一天
                        console.log('不是当天')
                        
                        this.activeAllDate=`${year}-${month}-${day}`
                        
                        localStorage.setItem('activeAllDate',this.activeAllDate)
                    }
                    this.day=this.activeAllDate
                    this.month=0
                    this.year=0
                }else{
                    // console.log('没有缓存当天')
                    localStorage.setItem('currentDate',nowdate)
                    // this.activeDate=`${year}-${month}-${day}`
                    this.activeAllDate=`${year}-${month}-${day}`
                    // localStorage.setItem('activeDate',this.activeDate)
                    localStorage.setItem('activeAllDate',this.activeAllDate)
                    this.day=day
                    this.month=month
                }
            }
            if(activeNav==2){
                this.monthSty=new Date(this.activeAllDate)
                let dateList=this.activeAllDate.split('-')
                console.log('dateList',dateList)
                this.day=0
                this.month=dateList[1]
                this.year=dateList[0]
            }
            if(activeNav==3){
                // console.log('进来了activeAllDate',this.activeAllDate)
                this.year=activeAllDate
                this.month=0
                this.day=0
            }

        }else{
            // console.log('没缓存')
            this.activeNav=1
            this.activeAllDate=`${year}-${month}-${day}`
            localStorage.setItem('activeNav',this.activeNav)
            localStorage.setItem('activeAllDate',this.activeAllDate)
            localStorage.setItem('currentDate',nowdate)//当前时间
            this.day=this.activeAllDate
            this.month=0
            this.year=0

        }
        // if(this.activeNav==1){
        //     this.year=0
        //     this.month=0
        //     this.activeAllDate=`${year}-${month}-${day}`
        //     this.day=this.activeAllDate
        // }
        // if(this.activeNav==2){
        //     this.year=year
        //     this.month=month
        //     this.day=0
        //     this.activeAllDate=`${year}-${month}`
        // }
        // if(this.activeNav==3){
        //     this.year=year
        //     this.month=0
        //     this.day=0
        //     this.activeAllDate=`${year}`
        // }
        // console.log('activeAllDate',this.activeAllDate)

        // console.log('year--',this.year)
        // console.log('month--',this.month)
        // console.log('day--',this.day)
        this.minDate=new Date(2021, 0, 1)
        this.maxDate=new Date(year, preDate.getMonth(), day)
        this.minMonth=new Date(2021, 0, 1)
        this.maxMonth=new Date(year, preDate.getMonth(), day)

        this.preDate=(date.getTime() - (24*60*60*1000))
        
        this.getReportData()
    },
    methods:{
        getReportData(){
            let obj={
                year:+this.year,
                month:+this.month,
                day:this.day
            }
            // if(this.activeNav==1){
            //     obj.year=0
            //     obj.month=0
            // }
            // if(this.activeNav==2){
            //     obj.year=0,
            //     obj.day=0
            // }
            // if(this.activeNav==3){
            //     obj.day=0,
            //     obj.month=0
            // }
             Toast.loading({
                message: '加载中',
                // forbidClick: true,
                duration:0
            })
            console.log('参数',obj)
             this.$apiRequest.getReportDataNew(obj).then(res=>{
                console.log('集团列表',res)
                Toast.clear()
                if(res.code==200){
                    this.allData=res.data.total.pop()
                    this.reportInfo=res.data
                    
                    this.channelTitle=res.data.channel[0].sub
                    this.userTitle=res.data.user[0].user
                }
                
             })
        },
        goCheckNav(type){
            this.activeNav=type
            localStorage.setItem('activeNav',this.activeNav)
            var date=new Date()
            var preDate=new Date(date.getTime() - (24*60*60*1000))
            let year=preDate.getFullYear()
            let month=preDate.getMonth() + 1
            let day= preDate.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''

            // if(this.activeNav==1){

            // }
            // if(this.activeNav==2){
            //     this.monthSty=new Date(`${year}-${month}`)
            //     console.log('monthSty点击切换',this.monthSty)
            // }

            // this.activeNav==1?this.activeAllDate=`${year}-${month}-${day}`:''
            // this.activeNav==2?this.activeAllDate=`${year}-${month}`:''
            // this.activeNav==3?this.activeAllDate=`${year}`:''
           

            this.getDate(year,month,day)
             localStorage.setItem('activeAllDate',this.activeAllDate)
            // this.getChannelReport()
            // this.getReportData()
            this.getReportData()
        },
        goSub(){//减
            if(this.activeNav=='1'){
                let aa=new Date(this.activeAllDate) * 1
                let bb= aa - (24*60*60*1000)
                let cc=getDate(bb,3,'-')
                // console.log('cc',cc)
                this.activeAllDate=cc
                this.day=cc
            }
            if(this.activeNav=='2'){
                let newArr=this.activeAllDate.split('-')
                let yearSty=newArr[0]
                let monthSty=newArr[1]
                let newYear=''
                let newMonth=''
                if(monthSty== 1){
                    if(yearSty==2021 || yearSty < 2021){
                        Toast('不能再往前了')
                        return
                    }else{
                        newYear= (+yearSty - 1)
                        newMonth=12
                    }
                }else{
                    newYear = newArr[0]
                    newMonth = (+monthSty - 1)
                }
                newMonth<10?newMonth='0'+newMonth: ''
                this.activeAllDate=`${newYear}-${newMonth}`
                this.year=newYear
                this.month=newMonth
                this.day=0
            }
            if(this.activeNav=='3'){
                if(this.activeAllDate==2021){
                    Toast('不能再往前了')
                    return
                }
                this.activeAllDate = +(this.activeAllDate - 1)
                console.log('居然没有',this.activeAllDate)
                this.year=this.activeAllDate
                this.month=0
                this.day=0
            }
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getReportData()
        },
        goAdd(){//加
            let cc=''
            if(this.activeNav=='1'){//天---年月日
                let aa=new Date(this.activeAllDate) * 1
                let bb= aa + (24*60*60*1000)
                cc=getDate(bb,3,'-')
                if(bb === this.preDate || bb > this.preDate){
                    Toast('不能再往后了')
                    return
                }
                this.activeAllDate=cc
                console.log('activeAllDate',this.activeAllDate)
                this.day=cc
                // this.getDate()
            }
            if(this.activeNav=='2'){
                // console.log('这是this.activeAllDate',this.activeAllDate)
                let newArr=this.activeAllDate.split('-')
                let yearSty=newArr[0]
                let monthSty=newArr[1]
                let newYear=''
                let newMonth=''
                if(monthSty == 12){
                    if(yearSty==2022 || yearSty > 2022){
                        Toast('不能再往后了')
                        return
                    }else{
                        newYear= (+yearSty + 1)
                        newMonth=1
                    }
                }else{
                    let aa=new Date(this.activeAllDate) * 1
                    let bb=new Date(this.nowMonthSty) * 1
                    if(aa == bb || aa > bb){
                        Toast('不能再往后了')
                        return
                    }
                    newYear = newArr[0]
                    newMonth = (+monthSty + 1)
                }
                newMonth<10?newMonth='0'+newMonth: ''
                this.activeAllDate=`${newYear}-${newMonth}`
                console.log('newMonth',newMonth)
                this.year=newYear
                this.month=newMonth
                this.day=0
                
            }
            if(this.activeNav=='3'){
                if(this.activeAllDate==2022){
                    Toast('不能再往后了')
                    return
                }
                this.activeAllDate = +(+this.activeAllDate + 1)
                this.year=this.activeAllDate
                this.month=0
                this.day=0
            }
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getReportData()
        },
        goCheckTime(){
            console.log('hahh')
            if(this.activeNav=='1'){
                this.isShowDate=true
            }
            if(this.activeNav=='2'){
                this.isShowMonth=true
            }
        },
        goContempore(type){
            this.contemporeType=type
        },
        getChannel(info){
            console.log('info',info)
            let obj={
                brandId:info.brandId,
                year:this.year,
                month:this.month,
                day:this.day,
                brandName:info.tit,
                activeNav:this.activeNav
            }
            if(this.activeNav>1){
                obj.contemporeType=this.contemporeType
            }
            this.$router.push({name:"reportClassNew",query:obj}) 
        },
        goSubLink(info){
            console.log('infooooooo11',info)

            let obj={
                brandId:info.brandId,
                channelId:info.channelId,
                year:this.year,
                month:this.month,
                day:this.day,
                // brandName:this.brandName,
                activeNav:this.activeNav
            }
            info.brandId==10?obj.brandName='ELLASSAY':''
            info.brandId==30?obj.brandName='LAUREL':''
            info.brandId==16?obj.brandName='IRO':''
            info.brandId==15?obj.brandName='SP':''
            info.brandId==80?obj.brandName='ED':''
            this.$router.push({name:'areaReport',query:obj})
        },
        getDate(year,month,day){
            if(this.activeNav==1){
                this.year=0
                this.month=0
                this.activeAllDate=`${year}-${month}-${day}`
                this.day=this.activeAllDate
            }
            if(this.activeNav==2){
                this.year=year
                this.month=month
                this.day=0
                this.activeAllDate=`${year}-${month}`
            }
            if(this.activeNav==3){
                this.year=year
                this.month=0
                this.day=0
                this.activeAllDate=`${year}`
            }
            // this.nowMonthSty=`${year}-${month}`

            console.log('到底activeAllDate',this.activeAllDate)
        },
        onConfirmDate(date){//天
            console.log('选择了日期',date)
            this.isShowDate=false 
            let month=date.getMonth() + 1
            let day= date.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''
            
            // this.day=day
            // this.month=month
            // this.activeDate=`${date.getFullYear()}-${month}-${day}`
            localStorage.setItem('activeDate',this.activeDate)
            this.activeAllDate=`${date.getFullYear()}-${month}-${day}`
            this.day=this.activeAllDate
            localStorage.setItem('activeAllDate',this.activeAllDate)
            // this.getChannelReport()
            this.getReportData()
        },
        formatter(type, val) {
            if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            }
            return val;
        },
        onConfirmMonth(date,val){
            // console.log('activeAllDate--------------',this.activeAllDate)
            console.log('确定月份---',date)
            let year=date.getFullYear()
            let month=date.getMonth() + 1
            // let day= date.getDate()
            console.log('year---',year)
            console.log('month---',month)
            this.isShowMonth=false
            month<10?month='0'+month: ''
            // day<10?day='0'+day: ''
            // this.activeMonth=`${year}-${month}`
            // localStorage.setItem('activeMonth',this.activeMonth)
            // this.activeAllDate=`${date.getFullYear()}-${month}-${day}`
            this.getDate(year,month,0)
            this.monthSty=new Date(`${year}-${month}`)
            // this.activeAllDate=`${date.getFullYear()}-${month}`
            localStorage.setItem('activeAllDate',this.activeAllDate)
            // this.getChannelReport()
            this.getReportData()
        },
        onCancelDate(){
            this.isShowMonth=false
        }
    }
}
</script>
<style>
.navContent.van-dropdown-menu__bar{
    background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
} 
.reportMain .van-overlay,.reportMain .van-popup{
    max-width: 8rem;
    position: fixed;
    left:50%;
    transform: translateX(-50%);
}
.reportMain .van-icon{
    font-size: 0.22rem;
}
</style>
<style lang='less' scoped>
.choiceSty{
    width: 92%;
    margin: 0 auto 0.2rem auto;
    padding: 0.2rem;
    border-radius: 0.2rem;
    // background: rgba(83, 114, 192,0.1);
    .navBtm{
        padding: 0.14rem 0;
    }
}
.blueBg{
    background-color: #4873c1;
}
.borderBlue{
    border:1px #4873c1 solid
}
.contentar{
    background-color: #f1f1f1;
    padding: 0.4rem 0;
    .w50{
        width: 50%;
    }
    .w22{width: 22%;}
    .H50{
        height: 1rem;
        border: 1px #eee solid;
        margin-left: -1px;
        margin-top: -1px;
    }
    .rotate180{
        transform: rotate(180deg);
        position: relative;
        bottom: 0.04rem
    }
    .navContent{
        // background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
        width: 92%;
        margin: 0 auto 0 auto;
        padding: 0.2rem 0;
        border-radius: 0.1rem;
        // border: 1px #ddd solid;
    }
    .tableHTitleBg {
        background-color: #f5f7fa;
    }
    .brandName{
        margin-left: -1px;
        margin-top: -1px;
        background-color: #f5f7fa;
        // height: 0.6rem;
        padding: 0.2rem 0;
        border: 1px #eee solid;
    }
    .w33{
        width: 33.333333%;
        padding: 0.24rem 0;
        border:1px #eee solid;
        margin-left: -1px;
        margin-top: -1px;
    }
    .contentLayout{
        width: 92%;
        margin: 0 auto 0.4rem auto;;
        padding: 0 0 0.2rem 0;
        border-radius: 0.2rem;
    }
    .listContent{
        .w33:nth-child(3n){
            border-right:none !important
        }
        .w33:nth-child(3){
            border-right:1px #eee solid !important;
        }
        
    }
    .subTitle{
        padding: 0.2rem;
        border-bottom: 1px #eee solid;
    }
    .borderRight{border-right:1px #eee solid}
    .borderBtm{border-bottom:1px #eee solid}
    .borderTop{border-top:1px #eee solid}
}
.arrowSty{
    display: block;
    width: 0;
    height: 0;
    border:0.12rem solid transparent;
    // border-top-color: #4873c1;
    border-top-color: #f1f1f1;
    position: relative;
    top: 0.06rem;
    margin-left: 0.06rem;
}
.reportTotalSty{
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    border-radius: 0.2rem;
    .samePeriodNav{
        width:70%;
        margin: 0 auto;
        // padding-top: 0.3rem;
        padding: 0.3rem 0;
    }
    .grayBorder{
        border-bottom: 1px #ddd solid;
        padding-bottom: 0.1rem;
    }
    .blueBorder{
        border-bottom: 1px #4873c1 solid;
        padding-bottom: 0.1rem;
    }
}

</style>
